import React, { FunctionComponent, ReactNode } from 'react';
import styles from './index.less';
import { Icon } from 'react-vant';


export interface IProps {
    visiblity: boolean;
    setVisType: (show: boolean) => void;
    position?: 'left' | 'right' | 'top' | 'bottom';
    children?: ReactNode | string | null;
}

const Overlay: FunctionComponent<IProps> = ({ position = 'top', visiblity, setVisType, children = null }) => {
    return (
        <div className={`${styles.overlay} ${styles['overlay_' + position]} ${visiblity ? styles.show : ''}`}>
            <div className={styles.overlay_wrapper}>
                <div className={styles.overlay_wrapper_main}>
                    {children}
                </div>
                <div className={styles.overlay_wrapper_close} onClick={() => setVisType(false)}>
                    <Icon name="cross" />
                </div>
            </div>
        </div>
    )
}

export default Overlay;